<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>工单管理</el-breadcrumb-item>
            <el-breadcrumb-item>工艺流程</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryRoute" class="demo-form-inline">
            <el-form-item label="工艺编码">
                <el-input v-model="queryRoute.routeCode" placeholder="工艺编码" clearable />
            </el-form-item>
            <el-form-item label="工艺名称">
                <el-input v-model="queryRoute.routeName" placeholder="工艺名称" clearable />
            </el-form-item>
            <el-form-item label="是否禁用">
                <el-select v-model="queryRoute.routeStatus" placeholder="状态">
                    <el-option label="全部" :value="0" />
                    <el-option label="正常" :value="1" />
                    <el-option label="禁用" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadroute">搜索</el-button>
                <el-button type="primary" @click="loadroute">重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->
        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增工单" @click="this.addrouteDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon></el-button>
            <el-button @click="handlerEditroute" title="编辑选中工单" type="primary"><el-icon>
                    <EditPen />
                </el-icon></el-button>
            <el-button @click="handlerDeleteroute" title="删除选中工单" type="primary"><el-icon>
                    <Delete />
                </el-icon></el-button>
        </div>
        <!-- 工具栏结束 -->
        <!-- 表格 开始 -->
        <el-table ref="routeTable" :data="route" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="工艺路线编号" property="routeCode" />
            <el-table-column align="center" label="工艺路线名称" property="routeName" />
            <el-table-column align="center" label="工艺路线说明" property="routeDesc" />
            <el-table-column align="center" label="是否启用" property="enableFlag">
                <template #default="scope">
                    <!-- scope.row 就是整行数据-->
                    <el-tag v-if="scope.row.enableFlag =='Y'" class="ml-2" type="success">正常</el-tag>
                    <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注" property="remark"></el-table-column>
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="routeLimit" :pager-count="routeMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="routeTotal" />
        <!-- 分页栏结束 -->

        <!-- 添加工单的弹窗窗体开始-->
        <el-dialog v-model="addrouteDialogVisible" title="添加工艺路线" width="600" align-center>
            <!-- 添加用户的表单 -->
            <el-form label-width="100px" :model="newroute" style="max-width: 460px">
                <el-form-item label="编号">
                    <el-input v-model="newroute.routeCode" />
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="newroute.routeName" />
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="textarea" :rows="2" v-model="newroute.attention" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-input v-model="newroute.enableFlag" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="2" v-model="newroute.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddroute">取消</el-button>
                    <el-button type="primary" @click="doAddroute">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加用户的弹窗窗体结束-->


        <!-- 工单数据管理的弹窗开始-->
        <el-dialog v-model="routeDataAttr.routeDataManagerDialogVisible" title="工单数据" width="80%" align-center>
            <!-- 工具栏开始 -->
            <div class="flex">
                <el-button title="新增工艺数据" @click="this.routeDataAttr.addrouteDataDialogVisible = true"
                    type="primary"><el-icon>
                        <Plus />
                    </el-icon></el-button>
                <el-button @click="handlerDataEdits" title="编辑选中工艺数据" type="primary"><el-icon>
                        <EditPen />
                    </el-icon></el-button>
                <el-button @click="handlerDataDeletes" title="删除选中工艺数据" type="primary"><el-icon>
                        <Delete />
                    </el-icon></el-button>
            </div>
            <!-- 工具栏结束 -->

            <!-- 工艺数据表格 开始 -->
            <el-table ref="routeDataTable" :data="routeDataAttr.routeDatas" max-height="800px" stripe="true" border="true"
                style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" label="#" property="dataId" />
                <el-table-column align="center" label="数据标签" property="dataTag" />
                <el-table-column align="center" label="数据键值" property="dataValue" />
                <el-table-column align="center" label="状态" property="dataStatus">
                    <template #default="scope">
                        <!-- scope.row 就是整行数据-->
                        <el-tag v-if="scope.row.dataStatus == 'Y'" class="ml-2" type="success">正常</el-tag>
                        <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数据备注" property="dataNotes" />
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleDataEdit(scope.row)">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                            @confirm="handleDataDelete(scope.row)" title="您是否要删除这行数据">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 工单数据表格结束 -->



            <!-- 添加工单数据的嵌套弹窗窗体开始-->
            <el-dialog v-model="routeDataAttr.addrouteDataDialogVisible" title="添加工单数据" width="600" align-center>
                <!-- 添加用户的表单 -->
                <el-form label-width="100px" :model="routeDataAttr.newData" style="max-width: 460px">
                    <el-form-item label="工单类型">
                        <el-input readonly v-model="currroute.routeType" />
                    </el-form-item>
                    <el-form-item label="工单数据标签">
                        <el-input v-model="routeDataAttr.newData.dataTag" />
                    </el-form-item>
                    <el-form-item label="工单数据键值">
                        <el-input v-model="routeDataAttr.newData.dataValue" />
                    </el-form-item>
                    <el-form-item label="工单数据排序">
                        <el-input v-model="routeDataAttr.newData.dataOrder" type="number" />
                    </el-form-item>
                    <el-form-item label="工单数据备注">
                        <el-input type="textarea" :rows="2" v-model="routeDataAttr.newData.dataNots" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelAddData">取消</el-button>
                        <el-button type="primary" @click="doAddData">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 添加用户的弹窗窗体结束-->
        </el-dialog>
        <!-- 工单数据管理的弹窗结束-->
    </div>
</template>
<script>
import routeRequest from '../../../api/route-api.js';
import tools from '../../../util/tools.js';
import routeDatRequest from '../../../api/route-data-api.js';
export default {
    data() {
        return {
            queryRoute: {}, // 分装查询工单条件的工单对象
            route: [],// 工单数据列表
            routeCurrPage: 1, // 工单分页的当前页码
            routeLimit: 10, // 工单分页的每页大小
            routeTotal: 0, // 工单列表的总条数
            routeMaxPage: 1,// 工单列表的最大页码

            // 新增工单相关属性
            addrouteDialogVisible: false,// 新增工单的弹窗标志
            newroute: {},// 封装新增的工单信息

            currroute:{},// 保存正在操作的工单信息


            // 工单数据管理相关属性
            routeDataAttr: {
                routeDataManagerDialogVisible: false,//工单数据管理的弹窗标志 
                addrouteDataDialogVisible: false,// 新增工单数据的弹窗标志
                routeDatas: [],// 工单数据列表
                newData:{},// 封装新增工单数据对象
            }
        }
    },
    methods: {
        /**
         * 新增工单数据事件
         */
        doAddData(){
            // 将记录的工单编号保存到工单数据中
            this.routeDataAttr.newData.routeId = this.currroute.routeId;
            console.log(this.routeDataAttr.newData);
            this.routeDataAttr.addrouteDataDialogVisible = false;
        },
        /**
         * 取消工单数据新增操作
         */
        cancelAddData(){
            this.routeDataAttr.addrouteDataDialogVisible = false;
            this.routeDataAttr.newData = {};
        },
        /**
         * 点击工单类型的事件，显示工单数据管理窗体
         * @param {*} row 
         */
        showrouteData(row) {
            this.routeDataAttr.routeDataManagerDialogVisible = true;
            this.loadrouteData(row.routeId);
            // 记录整行数据
            this.currroute = row;
        },
        /**
         * 加载工单数据列表
         * @param {*} routeId 
         */
        loadrouteData(routeId) {
            // 加载数据
            routeDatRequest.list(routeId, res => {
                this.routeDataAttr.routeDatas = res.data;
            });
        },
        /**
         * 工单数据工具栏删除按钮事件
         */
        handlerDataDeletes() { },
        /**
         * 工单数据工具栏编辑按钮事件
         */
        handlerDataEdits() { },
        /**
         * 工单数据列表的行删除事件
         * @param {*} row 
         */
        handleDataDelete(row) {

        },
        /**
         * 工单数据列表行编辑事件
         */
        handleDataEdit(row) {

        },
        /**
         * 新增工单的提交按钮事件
         */
        doAddroute() {
            // 数据校验：略
            // 提交数据
            routeRequest.save(this.newroute, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddroute();
                    // 重新加载数据
                    this.loadroute();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 取消新增工单的按钮事件
         */
        cancelAddroute() {
            // 关闭窗体
            this.addrouteDialogVisible = false;
            // 清空newroute
            this.newroute = {};
        },
        /**
         * 行删除事件
         * @param {} row 
         */
        handlerDelete(row) {

        },
        /**
         * 行编辑事件
         * @param {*} row 
         */
        handlerEdit(row) {

        },
        /**
         * 时间毫秒数转换为对应的字符串
         * @param {*} time 
         */
        timeFormatter(row, column, time) {
            return tools.timeMillisToString(time);
        },
        /**
         * 工具栏-选中删除按钮事件
         */
        handlerDeleteroute() {

        },
        /**
         * 工具栏-选中编辑按钮事件
         */
        handlerEditroute() {

        },
        /**
         * 工单列表的翻页函数
         * @param {} value  最新页码
         */
        changePage(value) {
            this.routeCurrPage = value;
            this.loadroute();
        },
        /**
         * 加载工单数据
         */
        loadroute() {
            routeRequest.list(this.routeCurrPage, this.routeLimit, this.queryRoute, res => {
                // 设置数据
                this.route = res.data.list;
                this.routeTotal = res.data.total;
                this.routeMaxPage = res.data.pages;
            });
        }
    },
    mounted() {
        // 默认加载工艺数据列表
        this.loadroute();
    }
}
</script>